<!-- 我的消息页面 -->
<template>
    <div>
         <!-- 头部 -->
        <reception-header/>

        <div class="message-bg">
            <div v-if="messageList.length !== 0" class="main">
                <div class="message" :id="'message' + item.aid" 
                    v-for="(item,index) in messageList" 
                    :key="index"
                    @click="openChatPage(item.aid,item.companyAid,item.userAid,item.name,item.avatar)"
                >
                    <div class="avatar">
                        <img class="img" :src="item.avatar ? item.avatar : 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'"/>
                    </div>
                    <div class="content-name">
                        <div class="name">{{item.name}}</div>
                        <div class="content" v-if="item.lastMessage.substring(0,4) !== 'http'">
                            {{(item.lastMessage.length > 16) ? item.lastMessage.substring(0,16) : item.lastMessage}}
                        </div>
                        <div class="content" v-if="item.lastMessage.substring(0,4) === 'http'">
                            有简历待查看
                        </div>
                    </div>
                    <div class="time-unread">
                        <div class="time">{{item.createTime}}</div>
                        <div class="un-read" v-if="item.unReadCount !== 0">{{item.unReadCount}}条未读消息</div>
                        <div class="un-read" v-if="item.unReadCount === 0">已读</div>
                    </div>
                </div>
            </div>
        </div>

        <el-empty v-if="messageList.length === 0" description="您没有任何消息" class="no-message"></el-empty>

        <!-- 聊天抽屉 -->  
        <el-drawer
            :title="drawerName"
            :visible.sync="drawer"
            :modal="false"
            direction="ltr"
            :show-close="false"
            size="600px"
            :before-close="handleClose"
        >
            <div>
                <div v-for="(item,index) in list" :key="index" >
                    <div class="right"
                        @mouseenter="companyMessageVisible = true"
                        @mouseleave="companyMessageVisible = false"
                        v-if="item.userEnterprise === 0 && remarks === '企业'"
                    > 
                        <div>
                            <div class="right-message-avatar"><img class="img" :src="loginUserAvatar ? loginUserAvatar : 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'"/></div>
                            <div class="right-message-message">{{item.content}}</div>
                        </div>
                        <div v-show="companyMessageVisible" class="companyWithdraw" @click="withdraw(item.aid)">
                            撤回消息 ☝
                        </div>
                    </div>
                    <div v-if="item.userEnterprise === 1 && remarks === '企业'">
                        <div v-if="item.content.substring(0,4) !== 'http'">
                            <div class="left-message-avatar"><img class="img" :src="avatar ? avatar : 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'"/></div>
                            <div class="left-message-message">{{item.content}}</div>
                        </div>
                        <div v-if="item.content.substring(0,4) === 'http'" title="点击下载简历">
                            <div class="left-message-avatar"><img class="img" :src="avatar ? avatar : 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'"/></div>
                            <div class="right-message-resume" @click="openUrl(item.content,item.userAid)">
                                <div class="picture-resume-bg-company"></div>
                                <div>
                                    <div class="click-view">点击查看</div>
                                </div> 
                            </div>
                        </div>
                    </div>
                    <div class="right"
                        v-if="item.userEnterprise === 1 && remarks === '用户'"
                        @mouseenter="userMessageVisible = true"
                        @mouseleave="userMessageVisible = false"
                    >
                        <div v-if="item.content.substring(0,4) !== 'http'">
                            <div class="right-message-avatar"><img class="img" :src="loginUserAvatar ? loginUserAvatar : 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'"/></div>
                            <div class="right-message-message">{{item.content}}</div>             
                        </div>
                        <div v-if="item.content.substring(0,4) === 'http'" title="点击下载简历">
                            <div class="right-message-avatar"><img class="img" :src="loginUserAvatar ? loginUserAvatar : 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'"/></div>
                            <div class="right-message-resume" @click="openUrl(item.content,item.userAid)">
                                <div class="picture-resume-bg"></div>
                                <div>
                                    <div class="click-view">点击查看</div>
                                </div>
                                
                            </div>
                        </div>
                        <div v-show="userMessageVisible" class="companyWithdraw" @click="withdraw(item.aid)">
                            撤回消息 ☝
                        </div>
                        
                    </div>
                    <div v-if="item.userEnterprise === 0 && remarks === '用户'">
                        <div class="left-message-avatar"><img class="img" :src="avatar ? avatar : 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'"/></div>
                        <div class="left-message-message">{{item.content}}</div>
                    </div>
                </div>
                         
                <!-- 消息发送框 -->
                <div class="message-send-container">
                    <el-input
                        type="textarea"
                        :rows="3"
                        placeholder="请输入内容"
                        v-model="textarea">
                    </el-input>
                    <div class="btn-pos">
                        <el-button type="primary" icon="el-icon-delete" @click="reset">重置</el-button>
                        <el-button v-if="remarks === '用户'" type="primary" icon="el-icon-document" @click="sendResume">发送简历</el-button>
                        <el-button type="primary" icon="el-icon-chat-dot-round" @click="send">发送消息</el-button>
                    </div>
                </div>
            </div>
        </el-drawer>

        <!-- 底部 -->
        <the-footer/>
    </div>
</template>

<script>
import ReceptionHeader from '../../components/ReceptionHeader.vue'
import TheFooter from '../../components/The-Footer.vue'
import { getStore } from '../../storage/storage'
import { 
    getMessageList,
    changeUnRead,
    getMessageByMessageAid,
    sendMessage,
    sendResumeApi,
    withdrawApi,
} from '../../api/message/index';
import { checkHaveResume, } from '../../api/personalApi/index';
import { getCompanyOrUserAllInfo } from '../../api/personalApi/index';
import { getCurrentLoginRoleName } from '../../api/dataViewApi/index';
export default {
    components: { ReceptionHeader,TheFooter },
    data () {
        return {
            userAid: '', // 用户aid
            companyAid: '', // 企业aid
            companyMessageVisible: false, // 鼠标移到企业自己发的那条消息上
            userMessageVisible: false,  // 鼠标移到用户自己发的消息上显示与否
            messageList:[], 
            drawer: false, // 抽屉默认不打开
            drawerName: '', // 抽屉标题
            avatar: '', // 抽屉里的左边头像
            loginUserAvatar: '', // 右边的头像
            textarea: '', // 输入框里面的内容
            list:[], // 点击抽屉之后展示的list
            remarks: '', // 当前登陆的角色名称
            messageAid: '', // 点击某一个消息，打开抽屉返回的aid
        }
    },
    created(){
        // 得到每个用户或每个公司的消息列表
        this.getMessageListFunc();

        // 获取当前登陆的是谁
        this.getLoginInfoFunc();
    },
    methods:{
        // 得到每个用户或每个公司的消息列表
        getMessageListFunc(){
            const params = {
                account: getStore("account"),
            }
            getMessageList(params).then(res=>{
                // console.log(res);
                this.messageList = res.data.data;
            })
        },

        // 打开聊天页面
        openChatPage(messageAid,companyAid,userAid,name,avatar){
            this.messageAid = messageAid;
            this.userAid = userAid;
            this.companyAid = companyAid;
            this.drawerName = name;
            this.drawer = true;
            this.avatar = avatar;

            // 根据event改变当前元素的背景
            document.getElementById('message' + messageAid).style.backgroundColor = '#409EFF';
            
            // 打开抽屉将未读消息变为已读
            const params = {
                account: getStore("account"),
                messageAid: messageAid,
            }
            changeUnRead(params).then((res)=>{
                if (res.data.code === 10000) {
                    this.getMessageListFunc();
                }
            })

            // 获取右边头像（当前登陆的头像：自己）
            this.getCompanyOrUserAllInfofunc();

            // 根据userAid和companyAid查询对应的消息列表
            const params1 = {
                userAid,
                companyAid,
            }
            // console.log(params1);
            getMessageByMessageAid(params1).then(res=>{
                // console.log(res);
                this.list = res.data.data;
            })

        },

        // 获取当前登陆的用户的所有信息
        getCompanyOrUserAllInfofunc(){
            const params = {
                account: getStore("account")
            }
            getCompanyOrUserAllInfo(params).then(res=>{
                this.loginUserAvatar = res.data.data.avatar;
            })
        },

        // 重置
        reset(){
            this.textarea = '';
        },

        // 发送消息
        send(){
            if(this.textarea === ''){
                this.$message.info('请输入内容再发送。');
            }else{
                const params = {
                    account: getStore('account'),
                    userAid:this.userAid,
                    companyAid: this.companyAid,
                    content: this.textarea,
                }
                sendMessage(params).then(res=>{
                    if(res.data.code === 10000){
                        this.$message.success("发送成功！");
                    }
                    this.textarea = '';
                    // 根据messageAid和当前登陆人或公司账号查询对应的消息列表
                    const params1 = {
                        userAid:this.userAid,
                        companyAid: this.companyAid
                    }
                    getMessageByMessageAid(params1).then(res=>{
                        // console.log(res);
                        this.list = res.data.data;
                    })
                })
            }
        },

         // 获取当前登陆的是谁
        getLoginInfoFunc(){
            const params = {
                account: getStore('account')
            }
            getCurrentLoginRoleName(params).then(res=>{
                this.remarks = res.data.data.remarks;
            })
        },

        // 关闭抽屉之前
        handleClose(){
            this.textarea = '';
            this.drawer = false;
             
            // 关闭之前将这个被点击的message背景颜色换回来
            document.getElementById('message' + this.messageAid).style.backgroundColor = 'rgb(210, 217, 217)'
        },

        // 发送简历（相当于也是发送一条消息）
        sendResume(){
            // 先判断是否有简历
            const params1 = {
              account: getStore("account"),
            }
            const _this = this;
            checkHaveResume(params1).then(res=>{
                if(res.data.data){ // 有简历
                    // 再发送简历
                    const params2 = {
                        userAid: this.userAid,
                        companyAid : this.companyAid,
                    }
                    sendResumeApi(params2).then(res=>{
                        if(res.data.code === 10000){
                            // 发送完简历之后再请求一次
                            const params3 = {
                                userAid: this.userAid,
                                companyAid : this.companyAid,
                            }
                            getMessageByMessageAid(params3).then(res=>{
                                // console.log(res);
                                _this.list = res.data.data;
                            })
                        }
                    });
                }else{ // 无简历，去完善简历
                    _this.$message({
                        message: '您还没有简历，先去上传简历或填写在线简历吧！',
                        type: 'info',
                        duration: 800,
                    });
                    setTimeout(() => {
                        _this.$router.push("/reception/editMyResume");
                    }, 800);
                }
            })
        },

        // 撤回消息
        withdraw(aid){
            // alert(aid)
            const params = {
                aid,
            }
            withdrawApi(params).then(res=>{
                if (res.data.code === 10000) {
                    this.$message({
                        message: res.data.message,
                        type: 'success',
                        duration: 650,
                    })
                }else{
                    this.$message({
                        message: res.data.message,
                        type: 'error',
                        duration: 650,
                    })
                }
            })
            setTimeout(() => {
                const params = {
                    userAid: this.userAid,
                    companyAid : this.companyAid,
                }
                // 根据messageAid和当前登陆人或公司账号查询对应的消息列表
                getMessageByMessageAid(params).then(res=>{
                    // console.log(res);
                    this.list = res.data.data;
                })
            }, 100);
        },

        // 点击查看简历
        openUrl(content,userAid){
            if (content === 'http-online-resume') {
                this.$router.push({
                    path: "/reception/myResumePage",
                    query: {
                        userAid,
                    }
                });
            }else{
                window.open(content,'_blank');
            }
        }

    }
}
</script>

<style scoped>
@import '../../assets/css/reception/myMessage.css';
</style>